<template>
  <div class="activity-detail-container">
    <!-- 活动基本信息 -->
    <div class="detail-header">
      <div class="header-content">
        <div class="status-badge" :class="getStatusClass(activity.status)">
          {{ getStatusText(activity.status) }}
        </div>
        <h1 class="activity-title">{{ activity.activityName }}</h1>
        <div class="activity-meta">
          <span><i class="el-icon-date"></i>{{ activity.startTime }} - {{ activity.endTime }}</span>
          <span><i class="el-icon-location"></i>{{ activity.schedule }}</span>
          <span><i class="el-icon-user"></i>{{ activity.participantCount }}/{{ activity.maxParticipants }}人</span>
        </div>
      </div>
      <div class="action-buttons">
        <el-button
          type="primary"
          size="medium"
          @click="handleJoin"
          :disabled="!canJoin"
        >{{ joinButtonText }}</el-button>
        <el-button type="text" @click="$router.go(-1)">返回列表</el-button>
      </div>
    </div>

    <!-- 活动详细内容 -->
    <el-row :gutter="20" class="detail-content">
      <el-col :span="16">
        <!-- 活动介绍 -->
        <el-card class="detail-card">
          <div slot="header">
            <span class="card-title">活动介绍</span>
          </div>
          <div class="activity-description">
            {{ activity.description }}
          </div>
        </el-card>

        <!-- 活动进度 -->
        <el-card class="detail-card">
          <div slot="header">
            <span class="card-title">活动进度</span>
          </div>
          <div class="progress-section">
            <el-progress
              :percentage="activity.progress"
              :status="getProgressStatus(activity.progress)"
              :stroke-width="20"
            ></el-progress>
            <div class="progress-info">
              <p>当前阶段：{{ getCurrentStage(activity.progress) }}</p>
              <p>预计完成时间：{{ activity.endTime }}</p>
            </div>
          </div>
        </el-card>

        <!-- 评论区 -->
        <el-card class="detail-card">
          <div slot="header">
            <span class="card-title">活动评论</span>
          </div>
          <div class="comment-section">
            <!-- 评论输入框 -->
            <div class="comment-input">
              <el-input
                type="textarea"
                v-model="newComment"
                :rows="3"
                placeholder="说说你的想法..."
              ></el-input>
              <el-button
                type="primary"
                @click="submitComment"
                :disabled="!newComment.trim()"
              >发表评论</el-button>
            </div>
            <!-- 评论列表 -->
            <div class="comment-list">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <el-avatar :src="`${baseUrl}${comment.avatar}`" size="small"></el-avatar>
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="username">{{ comment.username }}</span>
                    <span class="time">{{ comment.createTime }}</span>
                  </div>
                  <p class="comment-text">{{ comment.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <!-- 参与人员列表 -->
        <el-card class="detail-card">
          <div slot="header">
            <span class="card-title">参与人员</span>
            <span class="participant-count">{{ activity.participantCount }}/{{ activity.maxParticipants }}</span>
          </div>
          <div class="participants-list">
            <div v-for="participant in participants" :key="participant.id" class="participant-item">
              <el-avatar :src="`${baseUrl}${participant.avatar}`" size="small"></el-avatar>
              <span class="participant-name">{{ participant.username }}</span>
              <el-tag size="mini" :type="participant.participantRole === 'organizer' ? 'danger' : ''">{{ participant.participantRole === 'organizer' ? '组织者' : '参与者' }}</el-tag>
            </div>
          </div>
        </el-card>

        <!-- 活动信息卡片 -->
        <el-card class="detail-card">
          <div slot="header">
            <span class="card-title">活动信息</span>
          </div>
          <div class="info-list">
<!--           ` <div class="info-item">-->
<!--              <span class="label">活动类型</span>-->
<!--              <span class="value">{{ getActivityTypeName(activity.type) }}</span>-->
<!--            </div>`-->
            <div class="info-item">
              <span class="label">活动预算</span>
              <span class="value">¥{{ activity.budget }}</span>
            </div>
            <div class="info-item">
              <span class="label">组织者</span>
              <span class="value">{{ activity.organizer }}</span>
            </div>
            <div class="info-item">
              <span class="label">联系方式</span>
              <span class="value">{{ activity.contact }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addActivityComment,
  addActivityParticipant,
  getActivity,
  getActivityParticipantCount,
  getActivityParticipantUserInfo, getAllActivityComment
} from "@/api/reunion/activity";
import {addComment} from "@/api/reunion/comment";

export default {
  name: 'ActivityDetail',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      activity: {
        id: null,
        name: '',
        startTime: '',
        endTime: '',
        venue: '',
        participantCount: 0,
        maxParticipants: 0,
        budget: 0,
        status: 0,
        progress: 0,
        type: 0,
        description: '',
        organizer: '',
        contact: ''
      },
      participants: [],
      comments: [],
      newComment: ''
    }
  },
  computed: {
    canJoin() {
      return this.activity.participantCount < this.activity.maxParticipants && this.activity.status === 1
    },
    joinButtonText() {
      if (this.activity.status === 0) return '未开始'
      if (this.activity.participantCount >= this.activity.maxParticipants) return '已满员'
      return '立即报名'
    }
  },
  methods: {

    getActivityParticipantUserInfo(){
      getActivityParticipantUserInfo(this.$route.params.id).then(res => {
        if (res.code === 200){
          this.participants = res.data
        }
      })
    },
    getStatusClass(status) {
      return {
        'preparing': status === 0,
        'in-progress': status === 1,
        'finished': status === 2
      }
    },
    getStatusText(status) {
      const statusMap = {
        0: '筹备中',
        1: '进行中',
        2: '已结束'
      }
      return statusMap[status] || '未知状态'
    },
    getProgressStatus(progress) {
      if (progress < 30) return 'exception'
      if (progress < 70) return 'warning'
      return 'success'
    },
    getCurrentStage(progress) {
      if (progress < 30) return '前期准备'
      if (progress < 70) return '进行中'
      return '收尾阶段'
    },
    getActivityTypeName(typeId) {
      const types = {
        1: '团建活动',
        2: '培训会议',
        3: '节日庆典'
      }
      return types[typeId] || '未知类型'
    },
    async handleJoin() {
      try {
        await this.$confirm('确定要报名参加该活动吗？', '报名确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        // TODO: 调用报名API
        addActivityParticipant(this.activity.id).then(res => {
          if (res.code === 200){
            this.$message.success('报名成功')

          }
        })

      } catch {}
    },
    getAllActivateComment() {
      getAllActivityComment(this.$route.params.id).then(res => {
        if (res.code === 200){
          this.comments = res.data
        }
      })
    },
    async submitComment() {
      if (!this.newComment.trim()) return
      // TODO: 调用评论API

      let form = {
        id: null,
        activityId: this.$route.params.id,
        userId: null,
        avatar: null,
        content: this.newComment,
        status: null,
        replyToId: null,
        createTime: null,
        updateTime: null,
        username: null
      };
      console.log(form)
      addActivityComment(form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.getAllActivateComment()

      });

    },
    async fetchActivityDetail() {
      // TODO: 调用获取活动详情API
      // 模拟数据
      // this.activity = {
      //   id: this.$route.params.id,
      //   name: '团队拓展训练',
      //   startTime: '2023-12-01 09:00',
      //   endTime: '2023-12-01 17:00',
      //   venue: '户外拓展基地',
      //   participantCount: 30,
      //   maxParticipants: 50,
      //   budget: 5000,
      //   status: 1,
      //   progress: 75,
      //   type: 1,
      //   description: '通过团队拓展活动增强团队凝聚力和协作能力',
      //   organizer: '人力资源部',
      //   contact: '联系人：张三（电话：123-4567-8900）'
      // }
      getActivity(this.$route.params.id).then(response => {
        this.activity = response.data
      })
      try {
        const res = await getActivityParticipantCount(this.$route.params.id)
        console.log(res)

        this.$set(this.activity, 'participantCount', res.data)

      } catch (error) {
        console.error('获取参与人数失败:', error)
      }
      // 模拟参与者数据
      // this.participants = [
      //   { id: 1, name: '张三', role: 'organizer', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' },
      //   { id: 2, name: '李四', role: 'participant', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' }
      // ]
      // 模拟评论数据
      // this.comments = [
      //   { id: 1, username: '李四', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', content: '期待参加！', time: '2023-11-20 10:30' }
      // ]
    }
  },
  created() {
    this.fetchActivityDetail()
    this.getActivityParticipantUserInfo()
    this.getAllActivateComment()
  }
}
</script>

<style lang="scss" scoped>
.activity-detail-container {
  padding: 20px;

  .detail-header {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .header-content {
      flex: 1;

      .status-badge {
        display: inline-block;
        padding: 2px 12px;
        border-radius: 12px;
        font-size: 14px;
        color: white;
        margin-bottom: 12px;

        &.preparing { background: #e6a23c; }
        &.in-progress { background: #409eff; }
        &.finished { background: #909399; }
      }

      .activity-title {
        font-size: 24px;
        font-weight: 500;
        color: #2c3e50;
        margin: 0 0 16px;
      }

      .activity-meta {
        color: #606266;
        font-size: 14px;

        span {
          margin-right: 24px;

          i {
            margin-right: 8px;
          }
        }
      }
    }

    .action-buttons {
      .el-button {
        margin-left: 12px;
      }
    }
  }

  .detail-content {
    .detail-card {
      margin-bottom: 20px;

      .card-title {
        font-size: 16px;
        font-weight: 500;
        color: #2c3e50;
      }

      .participant-count {
        float: right;
        color: #909399;
        font-size: 14px;
      }
    }

    .activity-description {
      line-height: 1.6;
      color: #606266;
    }

    .progress-section {
      .progress-info {
        margin-top: 16px;
        color: #606266;

        p {
          margin: 8px 0;
        }
      }
    }

    .comment-section {
      .comment-input {
        margin-bottom: 20px;

        .el-button {
          margin-top: 12px;
          float: right;
        }
      }

      .comment-list {
        .comment-item {
          display: flex;
          margin-bottom: 16px;
          padding-bottom: 16px;
          border-bottom: 1px solid #ebeef5;

          &:last-child {
            border-bottom: none;
          }

          .comment-content {
            margin-left: 12px;
            flex: 1;

            .comment-header {
              margin-bottom: 8px;

              .username {
                font-weight: 500;
                color: #2c3e50;
              }

              .time {
                margin-left: 12px;
                font-size: 12px;
                color: #909399;
              }
            }

            .comment-text {
              margin: 0;
              color: #606266;
              line-height: 1.6;
            }
          }
        }
      }
    }

    .participants-list {
      .participant-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
          border-bottom: none;
        }

        .participant-name {
          margin: 0 12px;
          flex: 1;
        }
      }
    }

    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
          border-bottom: none;
        }

        .label {
          color: #909399;
        }

        .value {
          color: #2c3e50;
        }
      }
    }
  }
}
</style>
